<template>
  <!-- 添加或修改客户运营 -->
  <div class="app-container">
    <div style="background-color: #fff;">
      <div style="height: 7px;">

      </div>
      <div class="div-title">
        <span>基础信息</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="200px" label-position="right">

        <el-form-item label="计划名称：" prop="operationName">

          <span > {{form.operationName}} </span>
        </el-form-item>

        <el-form-item label="计划人群：" prop="definitionUid">
          <el-table class="inputcolumn" :data="customerGroup" style="width: 350px;margin:20px 0">
            <el-table-column prop="groupName" label="人群名称">
              <template slot-scope="scope">
                <span>
                  {{ scope.row.groupName }}
                </span>
                <el-tooltip :content="scope.row.groupDesc" placement="top" effect="light">
                  <i class="el-icon-question" style="margin-top: 10px; margin-left: 10px">
                  </i>
                </el-tooltip>
              </template>

            </el-table-column>

            <el-table-column align="center" prop="groupNumber" label="人群数量">
            </el-table-column>
          </el-table>
          <p class="descText">每次推送人数建议少于10万，否则容易出现延时的情况</p>
        </el-form-item>

        <el-form-item label="计划方式：" prop="operationMode" >
          <span v-if="form.operationMode == '0' " > 自动长期计划 </span>
          <span v-if="form.operationMode == '1' " > 手动定时计划 </span>
          <p class="descText">人群中如有满足条件的新增客户，新增的客户会自动收到营销通知</p>
          <span>计划执行时间：</span>
          <span v-if="form.operationMode == '0' ">
            {{form.operationBeginTime}} 至 {{form.operationEndTime}}
          </span>
          <span v-if="form.operationMode == '1' && form.executeType == '0' ">
            立即执行
          </span>
          <span v-if="form.operationMode == '1' && form.executeType == '1' ">
            定时执行
          </span>
        </el-form-item>

        <div class="div-title">
          <span>权益礼包</span>
        </div>
        <el-form-item label="优惠券配置：">
          <el-table class="inputcolumn" v-if="infoList2 && infoList2.length > 0" :data="infoList2"
                    style="width: 350px;margin:20px 0">
            <el-table-column prop="couponTypeName" label="优惠券名称"></el-table-column>
            <el-table-column align="center" prop="stock" label="库存（张）">
            </el-table-column>
            <el-table-column align="center" prop="couponNumber" label="赠送数"/>
          </el-table>
        </el-form-item>

        <div class="div-title">
          <span>通知配置</span>
        </div>
        <el-form-item label="通知渠道：" prop="notificationChannel">

          <span v-if="form.notificationRuleType == '0' && form.notificationRule == '0' "> 公众号图文消息 </span>
          <span v-if="form.notificationRuleType == '0' && form.notificationRule == '1' "> 短信通知 </span>
          <span v-if="form.notificationRuleType == '0' && form.notificationRule == '2' "> 微信模板消息 </span>
          <span v-if="form.notificationRuleType == '0' && form.notificationRule == '3' "> 小程序订阅消息 </span>
          <span v-else> 公众号、短信、微信模板、小程序 </span>
        </el-form-item>


        <el-form-item label="通知规则：" prop="notificationRuleType">
          <span v-if="form.notificationRuleType == '0' "> 通知一个渠道 </span>
          <span v-if="form.notificationRuleType == '1' "> 通知所有渠道 </span>
        </el-form-item>

        <div class="div-title" v-if="form.operationMode == 0">
          <span>时间设置</span>
        </div>
        <el-form-item label="发放权益、通知时间：每天" prop="notificationTime" v-if="form.operationMode == 0">

          <span>每天 {{form.notificationTime}} 开始发送通知</span>
        </el-form-item>
<!--        <div class="div-title">-->
<!--          <span>计划异常提醒</span>-->
<!--        </div>-->
<!--        <p class="titleText" style="margin-left: 120px;margin-top: 30px;">在计划即将到期、权益库存不足和短信条数不足的情况下提醒</p>-->
<!--        <el-form-item label="提醒方式：" prop="abnormalRemind" style="margin-top: 30px;" >-->
<!--          <ul v-if="form.abnormalRemind == '0' ">-->
<!--            <li>通过App推送通知我 </li>-->
<!--          </ul>-->
<!--          <ul v-if="form.abnormalRemind == '1' ">-->
<!--            <li>通过短信通知我 </li>-->
<!--          </ul>-->
<!--          <ul v-if="form.abnormalRemind == '2' ">-->
<!--            <li>通过App推送通知我 </li>-->
<!--            <li>通过短信通知我 </li>-->
<!--          </ul>-->
<!--          <span v-if="form.abnormalRemind == '2' || form.abnormalRemind == '1' "> 接受通知的手机号：{{form.remindPhone}} </span>-->
<!--        </el-form-item>-->
        <div class="dw" align="center">
          <el-button @click="cancel" style="margin-top: 10px;margin-left: -10%;">关闭</el-button>
        </div>
      </el-form>
    </div>
  </div>

</template>

<script>
import {
  addCustomerOperation,
  getCustomerOperation
} from "@/api/customer/CustomerOperation";
import {
  getGroupInfoById
} from "@/api/customer/CustomerGroup";
import selCoupon from "@/components/Activity/selCoupon";
export default {
  components: {
    selCoupon
  },
  data() {
    return {
      // 弹出层标题
      title: "",
      //查看详细标题
      viewTitle: "",
      // 是否显示弹出层
      open: false,
      //是否显示查看详细弹出层
      viewOpen: false,
      //查看详细数据
      showData: [],
      //人群名称简介
      definitionInfo: [],
      //运营名称
      groupName: "",
      //人群对象
      customerGroup: [],
      infoList2: [],
      notificationChannelArr: [],
      abnormalRemind:[],
      remindPhoneInput:false,
      notificationRule: [],
      operationUid:"",
      openC: false,
      //人群id
      groupUid: null,
      // 表单参数
      form: {
        notificationChannelArr:[],
        customerOperationPrivilegeVoList:[
          {
            isGiveCoupon:null,
            customerOperationPrivilegeGivesvo:[]
          }
        ]
      },
      // 表单校验
      rules: {}
    };
  },
  created() {
    let $this = this;
    const operationUid = $this.$route.params && $this.$route.params.operationUid;
    this.operationUid = operationUid;
      getCustomerOperation(operationUid).then(response => {
        this.form = response.data;
        console.log(response.data)
        getGroupInfoById(response.data.definitionUid).then(response => {
          this.form.definitionUid = response.data.groupUid;
          this.form.definitionName = response.data.groupName;
          this.customerGroup.push(response.data);
        });
        response.data.customerOperationPrivilegeVoList[0].customerOperationPrivilegeGivesvo.forEach((item) => {
          let coupon = new Object();
          coupon.couponTypeName = item.couponName;
          coupon.stock = item.couponNums;
          coupon.couponNumber = item.giveNumber;
          this.infoList2.push(coupon);
        })

        let notificationChannelArr =  response.data.notificationChannel.split("/");
        response.data.notificationRule = notificationChannelArr[0];
      });

  },
  methods: {
    cancel(){
      this.colseLevel();
    },
    colseLevel() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/customer/CustomerOperation",
        query: {
          t: Date.now()
        }
      });
    }
  }
};
</script>

<style scoped>
.block {
  padding: 30px 0;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.app-container {
  background-color: #F7F8FA;
  padding: 20px;
}

.font-normal1 {
  font-size: 12px;
  color: #84868a;
  margin-top: -5px;
}

.font-normal {
  font-size: 12px;
  color: #84868a;
  margin-top: -6px;
}

.div-title {
  background-color: rgb(242, 246, 252);
  margin: 15px;
  padding: 10px 10px 10px 10px;
}

.dw {
  border: 1px;
  position: fixed;
  bottom: 0px;
  background-color: #f2f6fc;
  width: 100%;
  height: 55px;
}

.descText {
  color: var(--theme-stroke-3, #969799);
  line-height: 14px;
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 0;
}

.titleText {
  line-height: 14px;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 0;
}

.channelClass {
  border: 1px solid #e5e5e5;
  padding: 20px;
  width: 450px;
  height: 300px;
  float: left;
  margin-left: 20px;
  margin-top: 20px;
}

.channelConten {
  border: 1px dotted #e5e5e5;
  padding: 25px 10px;
  height: 170px;
  text-align: center;
  min-height: 110px;
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 10px;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.descIcon {
  font-size: 40px;
  line-height: 40px;
  font-weight: 200;
  color: #155bd4;
}
</style>
